import * as React from 'react'
import { withRouter } from 'react-router-dom'
import { TabBar } from 'components'
import './index.less'

class TabBarView extends React.Component<any, any> {
    public render(): JSX.Element {
        const { select } = this.props
        const hd = (
            <div style={{ padding: '0.25rem 0.25rem 0 0.25rem', borderRadius: '50%', background: '#fff', position: 'relative', bottom: '0.65rem', borderTop: '0.05rem solid #ebebeb' }}>
                <div style={{ background: '#fbdfde', padding: '0.45rem', borderRadius: '50%' }}>
                    <img src={require('../../assets/00.png')} style={{ width: '1.2rem', height: '1.2rem', display: 'block' }} />
                </div>
            </div>
        )
        const hds = (
            <div style={{ padding: '0.25rem 0.25rem 0 0.25rem', borderRadius: '50%', background: '#fff', position: 'relative', bottom: '0.65rem', borderTop: '0.05rem solid #ebebeb' }}>
                <div style={{ background: '#fa0000', padding: '0.45rem', borderRadius: '50%' }}>
                    <img src={require('../../assets/01.png')} style={{ width: '1.2rem', height: '1.2rem', display: 'block' }} />
                </div>
            </div>
        )
        return (
            <TabBar
                className="tab_bar_view"
                fixed={true}
                style={{ height: '2.5rem', borderTop: '0.05rem solid #ebebeb' }}
                onChange={this.handleChange}
            >
                <TabBar.Item
                    label="中恒"
                    icon={<img src={require('../../assets/zh_icon.png')} />}
                    selectedIcon={<img src={require('../../assets/zh_icon_s.png')} />}
                    selected={select === 'home'}
                    field="home"
                />
                <TabBar.Item
                    label="分类"
                    icon={<img src={require('../../assets/classify.png')} />}
                    selectedIcon={<img src={require('../../assets/classify_s.png')} />}
                    selected={select === 'classify'}
                    field="classify"
                />
                <TabBar.Item
                    icon={hd}
                    selectedIcon={hds}
                    label="买豆"
                    selected={select === 'hd'}
                    field="hd"
                />
                <TabBar.Item
                    label="购物车"
                    icon={<img src={require('../../assets/shop_icon.png')} />}
                    selectedIcon={<img src={require('../../assets/shop_icon_s.png')} />}
                    selected={select === 'shop'}
                    field="shop"
                />
                <TabBar.Item
                    label="我的"
                    icon={<img src={require('../../assets/my_icon.png')} />}
                    selectedIcon={<img src={require('../../assets/my_icon_s.png')} />}
                    selected={select === 'my'}
                    field="my"
                />
            </TabBar>
        )
    }

    private handleChange = (fixed: string) => {
        const { history } = this.props
        switch (fixed) {
            case 'home': history.push('/'); break
            case 'classify': history.push('/category'); break
            case 'hd': history.push('/buyBeans'); break
            case 'shop': history.push('/cart'); break
            case 'my': history.push('/my'); break
            default: return
        }
    }
}
export default withRouter(TabBarView)